<template>
  <div class="editH5Paragraph" :class="preview&&'boxShadow border1px'" @click="handleClick">
    <div class="editH5Paragraph-box" :class="!preview&&'box_border_house padding-back'">
      <div class="editH5Paragraph-content">
        <div class="paragraph-info">
          <p class="paragraph-title">{{selectPagaraph.title}}</p>
          <p class="paragraph-time"><span>更新时间：{{selectPagaraph.updateTime}}</span></p>
        </div>
        <img class="paragraph-header-image" :src="selectPagaraph.coverImgUrl" alt="">
      </div>
      <i class="icon del-icon" v-if="!preview" @click.stop="delClickHandler()"/>    
    </div>
  </div>
</template>
<script>
export default {
  name:"editH5Paragraph",
  props:{
    selectPagaraph:{type:Object},
    preview: { type: Boolean, default: false }
  },
  data:() => ({

  }),
  methods: {
    delClickHandler(){
      this.$emit('delete')
    },
    handleClick(){
      this.$emit("handleClick")
    }
  },
}
</script>
<style lang="less" scoped>
.padding-back{
  background: rgba(0, 122, 230, 0.1);  
}
.editH5Paragraph{
  margin-top: 16px;
  .editH5Paragraph-box{
    position: relative;
    padding: 16px;
    > .del-icon {
      position: absolute;
      width: 28px;
      height: 28px;
      background: url(../../../assets/img/article/articlex.png) center no-repeat;
      background-size: 100% 100%;
      top: 0;
      right: 0;
      color: #ea4d2e;
    }
    .editH5Paragraph-content{
      display: flex;
      justify-content: space-between;
      .paragraph-info{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex:1;
        .paragraph-title{
          font-size: 18px;
          color: #13294F;
          font-weight: bold;
          line-height: 26px;          
        }
        .paragraph-time{
          font-size: 12px;
          color: #9CA5B5;
          line-height: 16px;
        }
      }
      .paragraph-header-image{
        width: 120px;
        height: 90px !important;
        border-radius: 6px;
      }
    }

  }
}
</style>
